<template>
	<view class="goodsInfoB">
		<view class="banner">
			<swiper indicator-dots="true" indicator-color="rgba(255,255,255,1)" indicator-active-color="#E41805" autoplay="true"
			 interval="3000">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image class="w100 h100" mode="aspectFill" lazy-load="true" :src="`${host}${item}-t.m75xx`" @click="$imgPreview(item, index, host, bannerList)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="goodsmsg">
			<view class="name">
				{{goodsMsg.title}}
			</view>
			<view class="sale">
				<!-- 已售：{{goodsMsg.sale}} -->
			</view>
			<view class="price">
				￥{{goodsMsg.plat_price}} <text class="price__origin">门市价：<text class="line-through">{{goodsMsg.price}}元</text></text>
			</view>
			<view class="add" @click="addcar(goodsMsg)">
				+ 购物车
			</view>
		</view>
		<view class="useMsg" v-if="goodsMsg.is_package == 1">
			<view>
				<text>有效时间</text>
				<text>{{goodsMsg.goods_rule.s_time}}至{{goodsMsg.goods_rule.e_time}}</text>
			</view>
			<view>
				<text>使用时间</text>
				<text>{{goodsMsg.goods_rule.s_hour}} - {{goodsMsg.goods_rule.e_hour}}</text>
			</view>
			<view>
				<text>使用备注</text>
				<text>{{goodsMsg.goods_rule.content}}</text>
			</view>
		</view>
		<view class="goodsimgBox">
			<view class="title">
				- 商品详情 -
				<text>commodity information</text>
			</view>
			<view class="gooddes">
				<view v-if="goodsMsg.is_package == 0">
					<text>{{!!goodsMsg.describe ? goodsMsg.describe:'店家很懒,还未设置描述'}}</text>
				</view>
				<view v-if="goodsMsg.is_package == 1">
					<view class="gray">{{!!goodsMsg.describe ? goodsMsg.describe:''}}</view>
					<view v-for="(item,index) in goodsMsg.goods_title" :key="index" @click="shopone(item)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="imgBox">
				<image v-for="(item,index) in goodsMsg.image" :key="index" :src="`${host}${item}-t.m75xx`" @click="$imgPreview(item, index, host, goodsMsg.image)" mode="widthFix"></image>
			</view>
		</view>
		<view class="buyCarBox">
			<view class="contant">
				<text class="iconfontPT iconlianximendian" @click="phone()"></text>
				<text>联系门店</text>
			</view>
			<view class="openbuycar" @click="showdailog">
				<text class="iconfontPT icongouwuche"></text>
				<text>{{totalNum}}</text>
			</view>
			<view class="pricetotal">
				合计<text>￥{{totalMoney}}</text>
			</view>
			<view class="tobuy" @click="tobug">
				去结算
			</view>
		</view>

		<view class="dialogBox" v-if="dialogstatus" @click="close">
			<view class="dialog">
				<view class="title">全部</view>
				<view class="goodsListBox">
					<view class="goodsItem" v-for="(item,index) in goods" :key="index">
						<image :src="`${host}${item.img}`"></image>
						<view class="goodsmsg">
							<view class="title">{{item.title}}</view>
							<view class="zekou">
								<text>{{item.zekou}}折</text>
							</view>
							<view class="price">
								{{item.plat_price}} <text>{{item.price}}</text>
							</view>
						</view>
						<view class="buy">
							<text class="buyButton" @tap.stop="remove(item)">-</text><text>{{item.num}}</text> <text class="buyButton"
							 @tap.stop="addcar(item)">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		goodsinfo,
		showCartList,
		addToCart,
		delcart
	} from "../../apis/shop/api.js"
	export default {
		data() {
			return {
				bannerList: [],
				dialogstatus: false,
				showList: false,
				goods: [],
				goodsMsg: "",
				id: "",
				store_id: "",
				totalMoney: 0,
				totalNum: 0,
				phonenum: "",
			}
		},
		computed: {
			host() {
				return this.$baseHost.qiniuHost
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.store_id = option.store_id;
			this.phonenum = option.phone
			uni.showLoading({
				title: '加载中...',
				mark: true,
			});
			this.getData();
			this.showCartList();
		},
		methods: {
			addcar(item) {
				let that = this
				let gid = item.goods_id || item.id
				addToCart({
					store_id: that.store_id,
					gid: gid
				}).then(res => {
					if (res.code == 200) {
						if (item.id) {
							uni.showToast({
								title: "添加成功",
								duration: 2000
							});
						}
						this.showCartList()
					}
				})
			},
			phone() {
				let that = this
				uni.makePhoneCall({
					phoneNumber: that.phonenum,
					success: function() {},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			close() {
				this.dialogstatus = false
			},
			showdailog() {
				this.showCartList()
				this.dialogstatus = true
			},
			tobug() {
				this.dialogstatus = false
				uni.navigateTo({
					url: "/pages/shop/pay?store_id=" + this.store_id + "&phonenum=" + this.phonenum
				})
			},
			remove(item) {
				let that = this
				delcart({
					store_id: that.store_id,
					gid: item.goods_id
				}).then(res => {
					if (res.code == 200) {
						if (item.id) {
							uni.showToast({
								title: "添加成功",
								duration: 2000
							});
						}

						this.showCartList()
					}
				})
			},
			showCartList() {
				let that = this
				showCartList({
					store_id: that.store_id,
				}).then(res => {
					if (res.code == 200) {
						that.goods = res.data;
						that.totalMoney = 0;
						that.totalNum = 0;
						that.goods.forEach(item => {
							that.totalNum += parseInt(item.num);
							item.zekou = (parseFloat(parseFloat(item.plat_price) / parseFloat(item.price)) * 10).toFixed(1);
							that.totalMoney += parseFloat(parseInt(item.num) * parseFloat(item.plat_price));
						})
						that.totalMoney = that.totalMoney.toFixed(2)
					}
				})
			},
			getData() {
				let that = this
				/*获取商品详情*/
				goodsinfo({
					store_id: that.store_id,
					gid: that.id
				}).then(res => {
					if (res.code == 200) {
						that.bannerList = res.data.img;
						that.goodsMsg = res.data;
					}
					that.showList = true;
					uni.hideLoading();
				})
				/*查看购物车*/

			},
			shopone(item) {
				uni.navigateTo({
					url: "/pages/shop/goodsinfo?store_id=" + this.store_id + '&id=' + item.id
				})
			},
			add(item) {
				let that = this

				// item.num++;
				// that.totalMoney = 0;
				// that.goods.forEach(item => {
				// 	that.totalMoney += parseFloat( parseInt(item.num) * parseInt(item.plat_price));
				// })
				// that.totalMoney = that.totalMoney.toFixed(2)
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f8f8f8;
	}

	.zekou {
		text {
			font-size: 22rpx;
			background-color: #FFE8E6;
			color: #E41805;
		}

	}

	.banner {
		height: 500rpx;

		swiper {
			height: 100%;
		}
	}

	.goodsItem {
		margin-top: 30rpx;
		padding: 30rpx;
		box-shadow: 0 0 2rpx 2rpx #ddd;

		&::after {
			content: "";
			display: block;
			height: 0;
			overflow: hidden;
			clear: both;
		}

		image {
			width: 120rpx;
			height: 120rpx;
			float: left;
			margin-right: 30rpx;
		}

		.goodsmsg {
			float: left;
			padding: 0;

			.title {
				text-align: left;
				color: #222;
			}

			.price {
				font-size: 30rpx;
				color: #E41805;
				font-weight: bold;

				text {
					font-size: 24rpx;
					color: #999999;
					text-decoration: line-through;
					margin-left: 10rpx;
					font-weight: normal;
				}
			}

		}

		.buy {
			float: right;
			margin-top: 20rpx;

			text {
				display: block;
				font-size: 24rpx;
				color: #999;
				float: left;
				margin: 0 20rpx;
			}

			.buyButton {
				width: 32rpx;
				height: 32rpx;
				border-radius: 32rpx;
				color: #666;
				font-size: 32rpx;
				border: 1rpx solid #666;
				text-align: center;
				line-height: 26rpx;
			}
		}
	}

	.goodsmsg {
		padding: 30rpx;
		background-color: #fff;
		position: relative;

		.name {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}

		.sale {
			font-size: 24rpx;
			color: #999;
			margin: 16rpx 0;
		}

		.price {
			font-size: 36rpx;
			color: #E41805;
			font-weight: bold;

			text {
				font-size: 24rpx;
				color: #999;
				padding-left: 20rpx;
				font-weight: normal;
			}
			
			
			&__origin {
				.line-through {
					padding-left: 0;
				}
			}
		}

		.add {
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
			background-color: #FFD163;
			color: #333;
			width: 155rpx;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 30rpx;
			text-align: center;
		}
	}

	.useMsg {
		padding: 30rpx;
		margin-top: 20rpx;
		background-color: #fff;

		view {
			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			&:nth-child(2) {
				margin: 45rpx 0;
			}

			text {
				&:nth-child(1) {
					width: 120rpx;
					font-size: 28rpx;
					color: #999;

				}

				&:nth-child(2) {
					font-size: 28rpx;
					color: #333;
					margin-left: 29rpx;
				}
			}
		}
	}

	.goodsimgBox {
		padding: 30rpx;
		padding-bottom: 196rpx;
		background-color: #fff;
		margin-top: 30rpx;

		.title {
			font-size: 30rpx;
			color: #333;
			text-align: center;

			text {
				display: block;
				font-size: 20rpx;
				color: #999;
			}
		}

		.gooddes {
			font-size: 26rpx;
			color: #333;
			text-align: left;
			line-height: 40rpx;

			.gray {
				color: #999;
			}

			text {
				float: left;
			}

			view {
				float: left;

				view {
					color: #E41805;
					margin: 0 10rpx;
				}
			}
		}

		.imgBox {
			width: 100%;

			image {
				width: 100%;
			}
		}
	}

	.buyCarBox {
		position: fixed;
		padding: 20rpx 30rpx 0 30rpx;
		left: 0;
		right: 0;
		bottom: 0;
		height: 166rpx;
		background-color: #fff;
		z-index: 999;

		.contant {
			text-align: center;
			float: left;


			text {
				&:nth-child(1) {
					display: block;
					width: 40rpx;
					height: 40rpx;
					margin: 0 auto;
				}

				&:nth-child(2) {
					font-size: 20rpx;
					color: #666;
					line-height: 36rpx;
				}

			}
		}

		.openbuycar {
			float: left;
			position: relative;
			margin: 0 30rpx;

			text {
				&:nth-child(1) {
					display: block;
					width: 48rpx;
					height: 48rpx;
					font-size: 44rpx;
					color: #FFC4BF;

				}

				&:nth-child(2) {
					position: absolute;
					display: block;
					width: 30rpx;
					height: 30rpx;
					font-size: 20rpx;
					text-align: center;
					right: -9rpx;
					top: -5rpx;
					background-color: #E41805;
					color: #fff;
					border-radius: 30rpx;
				}

			}
		}

		.pricetotal {
			float: left;
			font-size: 24rpx;
			color: #333;

			text {
				font-size: 40rpx;
				color: #E31600;
			}
		}

		.tobuy {
			float: right;
			width: 240rpx;
			height: 72rpx;
			color: #fff;
			background-color: #E41805;
			text-align: center;
			line-height: 72rpx;
			border-radius: 36rpx;
		}
	}


	.dialogBox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9;
		background-color: rgba(0, 0, 0, 0.5);

		.dialog {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 980rpx;
			z-index: 99;
			background-color: #fff;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title {
				text-align: center;
				color: #E41805;
				line-height: 88rpx;
			}


		}
	}
</style>
